import { Button, Input, Radio } from 'antd';
import { useState } from 'react';
import type { YmFormProps } from 'ym-design';
import { FormItem, YmForm } from 'ym-design';

function Layout() {
  const [form] = YmForm.useForm();
  const [formLayout, setFormLayout] =
    useState<YmFormProps['layout']>('vertical');
  const formItemLayout =
    formLayout === 'horizontal'
      ? { labelCol: { span: 4 }, wrapperCol: { span: 14 } }
      : null;

  const buttonItemLayout =
    formLayout === 'horizontal'
      ? { wrapperCol: { span: 14, offset: 4 } }
      : null;

  const onFormLayoutChange = ({
    layout,
  }: {
    layout: YmFormProps['layout'];
  }) => {
    setFormLayout(layout);
  };

  const handleFormSubmit = () => {
    form
      .validateFields()
      .then((values: any) => {
        console.log('--form--values--:', values);
      })
      .catch((errors) => {
        console.log('--form--errors--:', errors);
      });
  };

  return (
    <div style={{ maxWidth: '600px' }}>
      <YmForm
        {...formItemLayout}
        initialValues={{ layout: formLayout }}
        layout={formLayout}
        onValuesChange={onFormLayoutChange}
        form={form}
      >
        <FormItem label="Form Layout" name="layout">
          <Radio.Group value={formLayout}>
            <Radio.Button value="horizontal">Horizontal</Radio.Button>
            <Radio.Button value="vertical">Vertical</Radio.Button>
            <Radio.Button value="inline">Inline</Radio.Button>
          </Radio.Group>
        </FormItem>
        <FormItem label="Field A" name="fieldA" rules={[{ required: true }]}>
          <Input placeholder="Field A" />
        </FormItem>
        <FormItem label="Field B" name="fieldB" rules={[{ required: true }]}>
          <Input placeholder="Field B" />
        </FormItem>
        <FormItem {...buttonItemLayout}>
          <Button onClick={handleFormSubmit}>Submit</Button>
        </FormItem>
      </YmForm>
    </div>
  );
}

export default Layout;
